<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <title>Robot Learning Database</title>

  <link rel="stylesheet" href="{{ url_for('static', filename='assets/bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='overview-style.css') }}">

  <script src="{{ url_for('static', filename='assets/jquery-3.2.1.min.js') }}"></script>
  <script src="{{ url_for('static', filename='assets/bootstrap.bundle.min.js') }}"></script>
  <script src="{{ url_for('static', filename='assets/vue.min.js') }}"></script>
  <script src="{{ url_for('static', filename='assets/vue-resource.min.js') }}"></script>
  <script src="{{ url_for('static', filename='assets/socket.io.min.js') }}"></script>
</head>

<body>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="/">Robot Learning Database</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="live">Live</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="https://gitlab.ipr.kit.edu/berscheid/ros_bin_picking">GitLab</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="container-fluid mt-2 mb-2">
      <div class="row">
        <div class="col">
          <div class="d-flex flex-wrap">
            <div class="flex-element" :style="{ width: 100 / column_count + '%' }" v-for="entry in page_overview" @click="setDetailId(entry.id)" >
              <div class="card card-border" :class="{ 'text-light': entry.id == current_id, 'text-muted': entry.id != current_id, 'bg-light': entry.attempt, 'bg-success': entry.reward > 0, 'bg-danger': entry.reward <= 0 }">
                <img class="card-img-top" :src="`api/image/${entry.id}?database=${database}&bin=${draw_bin}&suffix=${suffix}`">
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                  <p class="card-title">[[ entry.id ]]</p>
                  <span>[[ entry.reward | round(3) ]]</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card mt-2 mb-2">
            <div class="card-body">
              <h5 class="card-title">[[ database_name ]]</h5>

              <dl class="row">
                <dt class="col-sm-5">Total</dt>
                <dd class="col-sm-7">[[ overview.length ]]</dd>

                <dt class="col-sm-5">Reward</dt>
                <dd class="col-sm-7">[[ stats.reward | round(3) ]]</dd>
              </dl>

              <select class="custom-select mr-sm-2 mb-2" v-model="database" v-on:change="loadDatabase">
                <option :value="d.value" v-for="d in database_list">[[ d.name ]]</option>
              </select>

              <b>Grid</b>
              <div class="input-group mb-2">
                <input type="number" class="form-control" v-model="row_count" v-on:change="updatePage">
                <input type="number" class="form-control" v-model="column_count" v-on:change="updatePage">
              </div>

              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" v-model="draw_bin" true-value="1" false-value="0" v-on:change="updatePage">
                <label class="form-check-label" for="inlineCheckbox1">Draw Bin</label>
              </div>

              <b>Suffix</b>
              <select class="custom-select mr-sm-2 mb-2" v-model="suffix" v-on:change="updatePage">
                <option value="ed-v">Ensenso Depth Image</option>
                <option value="ed-after">Ensenso After Image</option>
                <option value="rd-v">Realsense Depth Image</option>
                <option value="rc-v">Realsense Color Image</option>
                <option value="rd-after">Realsense After Depth Image</option>
                <option value="rc-after">Realsense After Color Image</option>
                <option value="r">Original Raw Image</option>
                <option value="v">Original Depth Image</option>
                <option value="after">Original After Image</option>
              </select>

              <div class="mb-2">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="-1" v-model="filter.reward" v-on:change="loadDatabase">
                  <label class="form-check-label" for="inlineRadio1">Show All</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="0" v-model="filter.reward" v-on:change="loadDatabase">
                  <label class="form-check-label" for="inlineRadio3">👎</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="1" v-model="filter.reward" v-on:change="loadDatabase">
                  <label class="form-check-label" for="inlineRadio2">👍</label>
                </div>
              </div>

              <b>Final D</b>
              <div class="input-group mb-2">
                <input type="number" step="0.001" min="0" max="0.1" class="form-control" v-model="filter.final_d_lower" v-on:change="loadDatabase">
                <input type="number" step="0.001" min="0" max="0.1" class="form-control" v-model="filter.final_d_upper" v-on:change="loadDatabase">
              </div>

              <b>ID</b>
              <input type="text" class="form-control" v-model="filter.id" v-on:change="loadDatabase">
            </div>
          </div>

          <div class="card mt-2 mb-2">
            <div class="card-body" v-if="detail && detail.action">
              <h6 class="card-title">ID [[ detail.id ]]</h6>

              <table class="table table-sm table-striped">
                <tr>
                  <th>Reward</th>
                  <td>[[ detail.reward ]]</td>
                </tr>

                <tr>
                  <th>Collision</th>
                  <td>[[ detail.collision ]]</td>
                </tr>

                <tr>
                  <th>Pose X | Y | Z</th>
                  <td>[[ detail.action.pose.x | round(4) ]] | [[ detail.action.pose.y | round(4) ]] | [[ detail.action.pose.z | round(4) ]]</td>
                </tr>

                <tr>
                  <th>Pose A | B | C</th>
                  <td>[[ detail.action.pose.a | round(4) ]] | [[ detail.action.pose.b | round(4) ]] | [[ detail.action.pose.c | round(4) ]]</td>
                </tr>

                <tr>
                  <th>Pose D</th>
                  <td>[[ detail.action.pose.d | round(4) ]]</td>
                </tr>

                <tr>
                  <th>Final Pose X | Y | Z</th>
                  <td>[[ detail.final.x | round(4) ]] | [[ detail.final.y | round(4) ]] | [[ detail.final.z | round(4) ]]</td>
                </tr>

                <tr>
                  <th>Final Pose A | B | C</th>
                  <td>[[ detail.final.a | round(4) ]] | [[ detail.final.b | round(4) ]] | [[ detail.final.c | round(4) ]]</td>
                </tr>

                <tr>
                  <th>Final Pose D</th>
                  <td>[[ detail.final.d | round(4) ]]</td>
                </tr>

                <tr>
                  <th>Found</th>
                  <td>[[ detail.action.found ]]</td>
                </tr>

                <tr>
                  <th>Prob</th>
                  <td>[[ detail.action.prob | round(4) ]] <span v-if="detail.action.probstd">± [[ detail.action.probstd | round(4) ]]</span></td>
                </tr>

                <tr>
                  <th>Method</th>
                  <td>[[ detail.action.method ]]</td>
                </tr>
              </table>
            </div>

            <div class="card-footer d-flex justify-content-between align-items-start">
              <div class="btn-group">
                <button class="btn btn-light" @click="setPage(0)" :disabled="page_index == 0">&laquo;</button>
                <button class="btn btn-light" @click="prevPage()" :disabled="page_index == 0">&lsaquo;</button>
                <button class="btn btn-link" disabled>[[ page_index + 1 ]] / [[ page_count ]]</button>
                <button class="btn btn-light" @click="nextPage()" :disabled="page_index == page_count - 1">&rsaquo;</button>
                <button class="btn btn-light" @click="setPage(page_count - 1)" :disabled="page_index == page_count - 1">&raquo;</button>
              </div>

              <button class="btn btn-danger" @click="deleteAction()">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="{{ url_for('static', filename='overview-app.js') }}"></script>
  </div>
</body>
</html>
